<!--智慧消防V1.0-index页面-->
<template>
    <dv-full-screen-container class="bg">
        <dv-loading v-if="loading" style="color: #fff">Loading...</dv-loading>
        <div v-else>
            <!--头部区域信息-->
            <top-header></top-header>
            <!--第一层表格区域-->
            <first-line></first-line>
            <second-line></second-line>
        </div>
    </dv-full-screen-container>
</template>

<script>
import screenfull from 'screenfull'
import TopHeader from "@/views/bigScreen/topHeader.vue";
import FirstLine from "@/views/bigScreen/firstLine.vue";
import SecondLine from "@/views/bigScreen/secondLine.vue";
export default {
    name: "index",
    components: {SecondLine, FirstLine, TopHeader},
    data(){
        return{
            isFullscreen: false,
            loading:true,

        }
    },
    created() {

    },
    mounted() {
        this.init()
    },
    methods:{
        screenFull(){
            if (!screenfull.isEnabled) {
                this.$message({
                    message: 'you browser can not work',
                    type: 'warning'
                })
                return false
            }else {
                screenfull.toggle()
            }
        },
        change() {
            this.isFullscreen = screenfull.isFullscreen
        },
        init() {
            this.cancelLoading()
            if (screenfull.isEnabled) {
                screenfull.on('change', this.change)
            }
        },
        cancelLoading () {
            setTimeout(() => {
                this.loading = false;
            }, 2000);
        },
        destroy() {
            if (screenfull.isEnabled) {
                screenfull.off('change', this.change)
            }
        }
    }
}
</script>

<style scoped>

</style>